<template>
	<uni-nav-bar dark :fixed="true" shadow background-color="#fff" status-bar left-icon="left" left-text="" title="订单列表" @clickLeft="back" />
	<view class="tab">
		<view class="line"></view>
		<view class="tab-item" :class="data.pages.model == 0? 'left' : 'none'" @click="tabModel(0)">
			<image v-if="data.pages.model == 0" src="../../static/my/tab-left.png"></image>
			<text>展览</text>
		</view>
		<view class="tab-item" :class="data.pages.model == 1? 'right' : 'none'" @click="tabModel(1)">
			<image v-if="data.pages.model == 1" src="../../static/my/tab-right.png"></image>
			<text>商城</text>
		</view>
	</view>
	
	<!-- 订单列表 -->
	<view class="no" v-if="0 > 1">暂无订单信息</view>
	<view  class="content" v-else>
		<view class="order" v-if="data.pages.model == 0">
			<!-- <nut-tabs v-model="data.oneIndex" @click="oneTab">
				<nut-tab-pane :title="item.name" v-for="(item, index) in data.tabDataOne" :key="index"> -->
					<!-- 未使用 -->
					<view v-for="(item, index) in data.tabDataOne" :key="index">
						<view class="list" v-if="data.oneIndex == 0" v-for="(item, index) in data.orderData" :key="item.id">
							<view class="list-title">
								{{item.goods_name}}
								<text class="city">{{item.city}}</text>
							</view>
							<view class="list-desc">
								
							</view>
							<view class="list-order">订单编号：{{item.order_sn}}</view>
							<view class="list-order">支付金额：￥{{item.price}}</view>
							<view class="list-order">预约日期：{{item.yuyue_date}}</view>
							<view v-if="item.detail && data.pages.status === 1">
								<view class="but" @click="item.flag = !item.flag">{{item.flag? '打开':'折叠'}}票夹</view>
								<view class="list-image" v-for="(ite, ind) in item.detail" v-show="item.flag">
									<image style="padding-bottom: 40rpx" :src="ite.qrcode" mode=""></image>
									<view class="tit">{{ite.piao_type}}{{ite.status? '（已使用）':'（未使用）'}}</view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 已使用 -->
					<!-- <view class="list" v-if="data.oneIndex == 1" v-for="(item, index) in data.orderData" :key="item.id">
						<view class="user">
							<view class="left">
								<image :src="item.qrcode" mode=""></image>
							</view>
							<view class="right">
								<view class="list-title type">
									{{item.goods_name}}
									<text class="city">{{item.city}}</text>
								</view>
								<view class="row">订单号：{{item.order_sn}}</view>
								<view class="row">预约时间：{{item.create_time}}</view>
								<view class="row">订单联系人：{{item.phone}}</view>
								<view class="detail">
									<view class="">
										门票数量：<text>{{item.buy_num}}</text>张
									</view>
									<view class="">
										合计：<text>¥ {{item.price}}</text>
									</view>
								</view>
							</view>
						</view>
					</view> -->
				<!-- </nut-tab-pane>
			</nut-tabs> -->
		</view>
		
		<!-- 商城 -->
		<view class="order" v-if="data.pages.model == 1">
			<nut-tabs v-model="data.twoIndex" @click="oneTab">
				<nut-tab-pane :title="item.name" v-for="(item, index) in data.tabDataTwo">
					<view class="order-item" v-for="(ite, ind) in data.orderData" :key="ind">
						<view class="shop-order" v-for="(e, i) in ite.detail" :key="i">
							<view class="left">
								<image :src="e.goods_img" mode=""></image>
							</view>
							<view class="right">
								<view class="title">
									<view class="name">{{e.goods_name}}</view>
									<view class="moeny" v-if="data.twoIndex == 3" style="color: #D20015; font-weight: 500">
										<!-- <text v-if="ite.refund_status == 1">用户申请</text> -->
										<text v-if="ite.refund_status == 2">提交退款</text>
										<text v-if="ite.refund_status == 3">已退</text>
									</view>
									<view class="moeny" v-if="data.twoIndex == 4" style="color: #D20015; font-weight: 500">
										<text>交易成功</text>
									</view>
									<view class="moeny" v-else>¥{{e.goods_price}}</view>
								</view>
								<view class="desc" style="color: #9C9C9C; padding: 10rpx 0rpx">
									<view class="name">{{e.buy_num}}</view>
									<view class="moeny" v-if="data.twoIndex !== 4">×{{e.buy_num}}</view>
								</view>
								<view v-if="data.twoIndex !== 3">
									<view class="time" v-if="data.twoIndex == 0">{{e.create_time}}</view>
									<view class="retuen" v-if="data.twoIndex == 1 || data.twoIndex == 2" @click="tuihuan(ite)"><text>退换</text></view>
								</view>
								<view v-if="data.twoIndex == 4">
									¥ {{e.goods_price}} <text style="color: #9C9C9C">× {{e.buy_num}}</text>
								</view>
								<view v-else>
									退款：¥ {{e.goods_price}}
								</view>
							</view>
						</view>
						<view class="shop-info">
							<view class="row" style="color: #D20015; margin-bottom: 30rpx;" v-if="data.twoIndex == 4">卖家已发货</view>
							<view class="row" v-if="data.twoIndex !== 3">
								<view class="row-item" v-if="data.twoIndex == 0">
									<view class="left">订单编号：</view>
									<view class="right">{{ite.order_sn}}</view>
								</view>
								<view class="row-item">
									<view class="left">商品总价：</view>
									<view class="right">¥ {{ite.price}}</view>
								</view>
								<view class="row-item" style="font-weight: 900">
									<view class="left">合计：</view>
									<view class="right" style="color: #D20015">¥ {{ite.price}}元</view>
								</view>
								<view class="row-btn" v-if="data.twoIndex == 0" @click="NextPay(ite)">
									<text>付款</text>
								</view>
							</view>
							
							<!-- 订单order信息 -->
							<view class="row" v-if="data.twoIndex == 1 || data.twoIndex == 2">
								<view class="line"></view>
								<view class="row-item">
									<view class="left">订单编号：</view>
									<view class="right">{{ite.order_sn}}</view>
								</view>
								<view class="row-item">
									<view class="left">创建时间：</view>
									<view class="right">{{ite.create_time}}</view>
								</view>
								<view class="row-item">
									<view class="left">付款时间：</view>
									<view class="right">{{ite.pay_time}}</view>
								</view>
								<view class="express" style="margin-top: 40rpx" v-if="data.twoIndex == 2">
									<view class="btn">确认收货</view>
									<view class="btn" style="margin-right: 20rpx">查看物流</view>
								</view>
							</view>
							
							<!-- 退款 -->
							<view class="row" v-if="data.twoIndex == 3">
								<view class="row-item">
									<view class="left">退款原因：</view>
									<view class="right gray">{{ite.refund_msg}}</view>
								</view>
								<view class="row-item">
									<view class="left">退款金额：</view>
									<view class="right gray">¥ {{ite.pay_status}}元</view>
								</view>
								<view class="row-item">
									<view class="left">退款编号：</view>
									<view class="right gray">{{ite.order_sn}}</view>
								</view>
								
								<view class="row-item">
									<view class="left">申请时间：</view>
									<view class="right gray">{{ite.pay_time}}</view>
								</view>
							</view>
							
							<!-- 完成 -->
							<view class="line" v-if="data.twoIndex == 4"></view>
							<view class="row" v-if="data.twoIndex == 4">
								<view class="row-item">
									<view class="left">收货地址：</view>
									<view class="right">
										<view>{{ite.nickname}}   {{ite.phone}}</view>
										<view>{{ite.address}}</view>
									</view>
								</view>
								<view class="row-item">
									<view class="left">订单编号：</view>
									<view class="right">{{ite.order_sn}}</view>
								</view>
								<view class="row-item">
									<view class="left">创建时间：</view>
									<view class="right">{{ite.order_sn}}</view>
								</view>
								<view class="row-item">
									<view class="left">付款时间：</view>
									<view class="right">{{ite.pay_time}}</view>
								</view>
								<view class="row-item">
									<view class="left">发货时间：</view>
									<view class="right">{{ite.update_time}}</view>
								</view>
								<view class="row-item">
									<view class="left">成交时间：</view>
									<view class="right">{{ite.order_sn}}</view>
								</view>
							</view>
						</view>
					</view>
				</nut-tab-pane>
			</nut-tabs>
		</view>
	</view>
	
	<!-- 弹窗 -->
	<nut-dialog
	    teleport="#app"
		title="是否退货"
		content=""
		:no-cancel-btn="true"
		:no-ok-btn="true"
		v-model:visible="visible">
		<slot name="footer">
			<nut-input
			    v-model="msg"
			    type="text"
			    show-word-limit
			    rows="2"
			    max-length="50"
			    placeholder="请输入留言"
			/>
			<view class="footer">
				<view class="cancel" @click="visible = false">
					取消
				</view>
				<view class="sure" @click="Return">
					确认
				</view>
			</view>
		</slot>
    </nut-dialog>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { ordersList, ordersReturn } from "@/request/api/order.js";
import { OrderPay } from "@/request/api/shop.js";

const visible = ref(false);
const activeGoods = ref(null);
const msg = ref('');

const data = reactive({
	orderData: [],
	// 展览or商城
	tabIndex: 1,
	// 展览
	oneIndex: 0,
	// 商城
	twoIndex: 0,
	tabDataOne: [
		{ name: '未使用', index: 1 },
		{ name: '已使用', index: 2 },
	],
	tabDataTwo: [
		{ name: '待付款', index: 1 },
		{ name: '待发货', index: 2 },
		{ name: '待收货', index: 3 },
		{ name: '售后中', index: 4 },
		{ name: '已完成', index: 5 }
	],
	pages: {
		page: 1,
		limit: 10,
		model: 1,  // 1 门票  0 商品
		status: 1,   // 1 - 5   model=0 status 1待付款,2待发货,3待收货,4售后,5已完成        model=1 status1未使用 2已使用 3已完成  
	}
})

onLoad((e) => {
	// 判断进入
	if (e.index) {
		if (JSON.parse(e.index).index == 5) {
			data.twoIndex = JSON.parse(e.index).index - 1;
			data.pages.status = 1;
			data.pages.model = 0;
		} else {
			data.pages.model = 0;
			data.twoIndex = 1;
			data.pages.status = 1;
		}
	}
	
	// 代付款
	if (e.type == 0) {
		data.pages.status = 0;
		console.log(data.pages.status, '1111111111')
		data.pages.model = 0;
	}
	getOrderData()
})

// 切换大分类
const tabModel = (num) => {
	if (num == 0) {
		data.pages.model = num;
		getOrderData()
	} else {
		uni.showToast({ title: '开发中', icon: 'none' });
	}
}

// 小分类
const oneTab = (item) => {
	data.pages.status = item.paneKey + 1;  // 下标+1
	getOrderData()
}

// 获取订单
const getOrderData = async () => {
	let paramas = { };
	const resultData = await ordersList(data.pages);
	resultData.data.list.map(item => {item.flag = false});
	data.orderData = resultData.data.list;
}

// 付款
const NextPay = async (item) => {
	const payParams = { order_sn: item.order_sn }
	const payData = await OrderPay(payParams);
	uni.requestPayment({
		provider: 'wxpay',    //支付类型-固定值
		timeStamp: payData.data.timeStamp, // 时间戳（单位：秒）
		nonceStr: payData.data.nonceStr, // 随机字符串
		package: payData.data.package, // 固定值
		signType: payData.data.signType, //固定值
		paySign: payData.data.paySign, //签名
		success: function (res) {
			console.log('success:' + JSON.stringify(res));
			uni.showToast({ title: '支付成功', icon: 'none' });
			getOrderData();
		},
		fail: function (err) {
			console.log('fail:' + JSON.stringify(err));
			uni.showToast({ title: '支付失败', icon: 'none' });
		}
	});
}

// 选中订单
const tuihuan = (item) => {
	activeGoods.value = item;
	visible.value = true;
}

// 退换货
const Return = async() => {
	const data = await ordersReturn({ order_id: activeGoods.value.id, msg: msg.value });
	uni.showToast({ title: '退货成功', icon: 'none' });
	visible.value = false;
	getOrderData();
}

const back = () => {
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style lang="scss" scoped>
	.tab {
		width: 100%;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		.line {
			position: absolute;
			z-index: 99;
			left:0;
			right:0;
			bottom:-2rpx;
			margin: auto;
			width: 90%;
			height: 2rpx;
			background-color: #E5E4E4;
		}
		.tab-item {
			width: 50%;
			height: 72rpx;
			text-align: center;
			position: relative;
			image {
				position: absolute;
				z-index: -9;
				left: 0;
				width: 100%;
				height: 72rpx;
			}
			text {
				width: 100%;
				z-index: 99;
				color: #fff;
				line-height: 72rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
			}
		}
		.left {
			color: #fff;
		}
		.right {
			color: #fff;
		}
		.none {
			text {
				color: #000;
			}
		}
	}
	.no {
		margin-top: 80rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1C1919;
		line-height: 40rpx;
		text-align: center;
	}
	
	// 主体订单
	.content {
		::v-deep .nut-tabs__titles {
			border-bottom: 8rpx solid #E5E4E4 !important;
			padding: 0rpx 50rpx !important;
			height: 90rpx !important;
		}
		// 订单
		.order {
			.list {
				padding: 20rpx 36rpx;
				border-bottom: 8rpx solid #E5E4E4;
				.list-title, .list-desc, .list-order {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1C1919;
					line-height: 36rpx;
					margin-bottom: 14rpx;
					.city {
						padding: 6rpx 18rpx;
						margin-left: 20rpx;
						border-radius: 20rpx;
						font-size: 26rpx;
						background-color: #000;
						color: #fff;
					}
				}
				.list-title {
					font-size: 38rpx;
					display: flex;
					align-items: center;
				}
				.list-order {
					opacity: .9;
					font-weight: 300;
				}
				.but {
					width: 200rpx;
					height: 50rpx;
					border-radius: 10rpx;
					padding: 10rpx !important;
					text-align: center;
					display: flex;
					align-items:center;
					justify-content: center;
					margin: 0 auto;
					border: 1px dashed #9F9F9F;
					margin-bottom: 20rpx;
					margin-top: 20rpx;
				}
				.list-image {
					width: 356rpx;
					height: 430rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					border: 1rpx solid #E5E4E4;
					margin: 0 auto;
					margin-top: 12rpx;
					margin-bottom: 40rpx;
					.tit {
						text-align: center;
					}
					image {
						width: 316rpx;
						height: 316rpx;
						padding: 20rpx !important;
					}
				}
				
				.user {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left {
						width: 30%;
						image {
							width: 144rpx;
							height: 144rpx;
							border-radius: 20rpx;
						}
					}
					.right {
						width: 70%;
						.row {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #1C1919;
							line-height: 40rpx;
						}
						.rows {
							font-size: 26rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #1C1919;
							line-height: 36rpx;
						}
						.type {
							font-size: 30rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #1C1919;
							line-height: 40rpx;
							margin-top: 22rpx;
						}
						.detail {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #1C1919;
							margin-top: 20rpx;
							line-height: 40rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							text {
								color: #D20015
							}
						}
					}
				}
			}
			
			.order-item {
				border-bottom: 8rpx solid #E5E4E4;
			}
			
			.shop-order {
				display: flex;
				align-items: center;
				padding: 20rpx 0rpx;
				margin: 0rpx 36rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #E5E4E4;
				.left {
					width: 180rpx;
					image {
						width: 144rpx;
						height: 144rpx;
						border-radius: 10rpx;
					}
				}
				.right {
					flex: 1;
					.title, .desc {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
				.retuen {
					width: 100%;
					display: flex;
					flex-direction: row-reverse;
					text {
						width: 154rpx;
						height: 52rpx;
						border-radius: 46rpx;
						border: 2rpx solid #9F9F9F;
						text-align: center;
						text-align: center;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #9C9C9C;
						line-height: 52rpx;
					}
				}
			}
			.shop-info {
				padding: 20rpx 0rpx;
				margin: 0rpx 26rpx;
				box-sizing: border-box;
				.line {
					width: 100%;
					height: 2rpx;
					background-color: #E5E4E4;
					margin: 20rpx 0rpx;
				}
				.row {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					.line {
						width: 100%;
						height: 2rpx;
						background-color: #E5E4E4;
						margin: 20rpx 0rpx;
					}
					.row-item {
						display: flex;
						justify-content: space-between;
						margin-bottom: 10rpx;
						.right {
							text-align: right;
						}
					}
					.gray {
						color: #9C9C9C;
					}
					.express {
						display: flex;
						align-items: center;
						flex-direction: row-reverse;
						.btn {
							width: 154rpx;
							line-height: 52rpx;
							text-align: center;
							height: 52rpx;
							border-radius: 46rpx;
							border: 2rpx solid #9F9F9F;
						}
					}
					.row-btn {
						text-align: right;
						margin-top: 28rpx;
						text {
							display: inline-block;
							width: 154rpx;
							height: 52rpx;
							text-align: right;
							background: #000000;
							border-radius: 46rpx;
							color: #fff;
							text-align: center;
							line-height: 52rpx;
						}
					}
				}
			}
		}
	}
	
	.footer {
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #000;
		font-size: 27rpx;
		margin-top: 20rpx;
		.cancel {
			width: 140rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 20rpx;
			border: 1rpx solid #D20015;
			background-color: #fff;
		}
		.sure {
			width: 140rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 20rpx;
			border: 1rpx solid #fff;
			color: #fff;
			background-color: #D20015;
		}
	}
</style>